import 'package:flutter/material.dart';

class LayoutCase extends StatelessWidget {
  const LayoutCase({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 300,
          height: 300,
          decoration: const BoxDecoration(
            color: Colors.blueGrey,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主轴
            crossAxisAlignment: CrossAxisAlignment.start, //交叉轴
            children: [
              Image.asset(
                'assets/open_eyes.png',
                width: 50,
                height: 50,
              ),
              Image.asset(
                'assets/open_eyes.png',
                width: 50,
                height: 50,
              ),
              Image.asset(
                'assets/open_eyes.png',
                width: 50,
                height: 50,
              ),
            ],
          ),
        ),
        Container(
          width: 200,
          decoration: BoxDecoration(
            color: Colors.grey,
            borderRadius: BorderRadius.circular(10),
          ),
          child: Column(
            children: [
              Image.network(
                'https://yanxuan-item.nosdn.127.net/72e734dd1a4d35ce650afebdaa600b57.png',
                width: 200,
                height: 200,
              ),
              const SizedBox(height: 10), // 通过盒子设置间距
              const Text('美妆效果嘎嘎不卡粉末面刷'),
              const SizedBox(height: 10), // 通过盒子设置间距
              const Text('¥99.90'),
            ],
          ),
        ),
        Container(
          width: double.infinity, //宽度占满 = “100%”
          height: 100,
          padding: const EdgeInsets.all(10),
          decoration: const BoxDecoration(
            color: Colors.yellow,
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Row(
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Image.network(
                    'https://yanxuan-item.nosdn.127.net/72e734dd1a4d35ce650afebdaa600b57.png',
                    height: double.infinity,
                    fit: BoxFit.cover,
                  ),
                ),
                const SizedBox(
                  width: 20,
                ),
                Expanded(
                  flex: 1, //占满主轴剩余空间，默认值为1
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      height: double.infinity,
                      color: Colors.red,
                      child: const Text(
                        '右侧布局右侧布局右侧布局右侧布局右侧布局右侧布局右侧布局右侧布局右侧布局右侧布局右侧布局右侧布局右侧布局右侧布局右侧布局右侧布局右侧布局右侧布局',
                        overflow: TextOverflow.ellipsis, //超出部分省略号
                        maxLines: 2, //最多显示2行),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        )
      ],
    );
  }
}

// import 'package:flutter/material.dart';

// class LayoutCase extends StatelessWidget {
//   const LayoutCase({super.key});

//   @override
//   Widget build(BuildContext context) {
//     return Row(
//       children: [
//         Container(
//           width: 100,
//           height: 300,
//           decoration: const BoxDecoration(
//             color: Colors.green,
//           ),
//           child: Column(
//             mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 主轴
//             crossAxisAlignment: CrossAxisAlignment.center, // 交叉轴
//             children: [
//               Image.asset('assets/open_eyes.png', width: 50, height: 50),
//               Image.asset('assets/open_eyes.png', width: 50, height: 50),
//               Image.asset('assets/open_eyes.png', width: 50, height: 50),
//             ],
//           ),
//         ),
//         Column(
//           children: [
//             Image.network(
//               'https://yanxuan-item.nosdn.127.net/72e734dd1a4d35ce650afebdaa600b57.png',
//               width: 200,
//               height: 200,
//             ),
//             const SizedBox(height: 10), // 通过盒子设置间距
//             const Text('美妆效果嘎嘎不卡粉末面刷'),
//             // 嵌套个 padding 组件也可以设置间距
//             const Padding(
//               padding: EdgeInsets.only(top: 10),
//               child: Text('¥99.90'),
//             ),
//           ],
//         )
//       ],
//     );
//   }
// }
